{% extends 'base.html' %}
{% block css %}
    .setting-button {
        position: fixed;
        right: 30px;
        bottom: 15px;
        width: 50px;  /* 可根据需要调整按钮的大小 */
        height: 50px;
    }
    .my-setting-form {
        width: 90%;  /* 表单宽度设置为页面宽度的40% */
        margin-left: 0;
    }

    /* 对 input 和 button 进行样式设置 */
    .my-setting-form .form-control,
    .my-setting-form input {
        border: 1px solid #ced4da; /* 设置统一的边框颜色，这里使用的是Bootstrap默认的边框颜色 */
        border-right: none;
    }

    .my-setting-form .icon-button {
        border: 1px solid #ced4da; /* 设置统一的边框颜色，这里使用的是Bootstrap默认的边框颜色 */
        border-left: none;
    }

    /* 使 input 和 button 在同一行显示，并调整宽度 */
    .my-setting-form .input-group {
        display: flex;
    }

    .my-setting-form .form-control {
        flex-grow: 1;  /* 输入框占据剩余空间 */
    }

    .my-setting-form .form-control {
        flex-grow: 1;  /* 输入框占据剩余空间 */
        padding-left: 20px; /* 增加左内边距以调整文本和光标的位置 */
    }
{% endblock %}
{% block content %}
<div class="alert alert-success hide fade" id="alert-success"></div>
<div class="alert alert-danger hide fade" id="alert-danger"></div>
<div class="content">
    <div class="row">
        <div class="col-lg-4">
            <div class="card ">
                <div class="card-header lead" style="min-height: 57px;">
                    <span class="font-weight-bold">重置数据库</span>
                    <div class="spinner-border float-right text-primary" id="loading" style="display:None"></div>
                </div>
                <div class="card-body">
                    <div class="btn btn-primary" id="reinit" onclick="reinit()">重置数据库</div>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="card ">
                <div class="card-header lead" style="min-height: 57px;">
                        <span class="font-weight-bold">设置文件夹根地址</span>
                        <div class="spinner-border float-right text-primary" id="loading" style="display:None"></div>
                </div>
                <div class="card-body">
                    <form action="" method="post" onsubmit="return false;" class="my-setting-form">
                        {% csrf_token %}
                        <div class="form-group">
                            <div class="input-group">
                                <input type="text" class="form-control" id="folder_path" name="folder_path"
                                       placeholder="请输入存放会议记录文件夹的文件夹地址">
                                <div class="input-group-append">
                                    <div class="btn btn-outline-secondary icon-button" type="button" id="folder_path" onclick=upload_path()>
                                        <i class="fa fa-upload"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="card ">
                <div class="card-header lead" style="min-height: 57px;">
                        <span class="font-weight-bold">上传会议文件</span>
                        <div class="spinner-border float-right text-primary" id="loading" style="display:None"></div>
                </div>
                <div class="card-body">
                    <form action="" method="post" enctype="multipart/form-data" onsubmit="return false">
                            {% csrf_token %}
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input" id="fileUpload" webkitdirectory directory
                                               onchange="showFilename(this.files[0])">
                                        <label class="custom-file-label" for="fileUpload" id="filename">
                                            选择要上传的文件夹
                                        </label>
                                    </div>
                                    <div class="input-group-append">
                                        <div class="btn btn-primary" id="submitDomain" onclick="insert()">上传</div>
                                    </div>
                                </div>
                            </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<a href="/page/search" class="setting-button">
    <img src="/static/images/main.png" alt="Main">
</a>
{% endblock %}
{% block script %}
    <script>
        $("#folder_path").keypress(function (e) {
            if (e.which === 13) {
                upload_path();
            }
        });

        function insert() {
            let files = $('#fileUpload').prop('files');
            var data_obj = {
                'folder_name': files[0].webkitRelativePath.split('/')[0],
            };

            var csrftoken = $("input[name='csrfmiddlewaretoken']").val();
            $.ajaxSetup({
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            });

            $.ajax({
                url: '/api/insert',
                type: 'post',
                contentType: 'application/json',
                data: JSON.stringify(data_obj),
                success: function (data, status, xmlHttpRequest) {
                    showAlert("#alert-success", "上传成功")
                },
                error: function (xmlHttpRequest) {
                    showAlert("#alert-danger", xmlHttpRequest.statusText)
                }
            });
        }

        function reinit() {
            var csrftoken = $("input[name='csrfmiddlewaretoken']").val();
            $.ajaxSetup({
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            });

            $.ajax({
                url: '/api/reinit',
                type: 'post',
                contentType: 'application/json',
                data: JSON.stringify({}),
                success: function (data, status, xmlHttpRequest) {
                    showAlert("#alert-success", "重置成功，数据库所有内容已清空")
                },
                error: function (xmlHttpRequest) {
                    showAlert("#alert-danger", xmlHttpRequest.statusText)
                }
            });
        }

        function showFilename(file) {
            console.log(file)
            $("#filename").html(file.webkitRelativePath.split('/')[0]);
        }

        function upload_path() {
            let folder_path = $("#folder_path").val();
            var data_obj = {
                "folder_path": folder_path
            }

            var csrftoken = $("input[name='csrfmiddlewaretoken']").val();
            $.ajaxSetup({
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            });

            $.ajax({
                url: '/api/folder_path',
                type: 'post',
                contentType: 'application/json',
                data: JSON.stringify(data_obj),
                success: function (data, status, xmlHttpRequest) {
                    showAlert("#alert-success", data["info"])
                },
                error: function (xmlHttpRequest) {
                    showAlert("#alert-danger", xmlHttpRequest.responseJSON.error)
                }
            });
        }

    </script>
{% endblock %}